<template>
    <div class="category-container">
        <div 
            class="categorycard"
            v-for="(item) in list"
            :key="item.albumId"
            @click="todetail(item.albumId)"
        >
            <img class="cate-img"
                :src="imgUrl1+item.albumCoverPath+imgUrl2"
                alt="">

            <div class="content">
                <div class="title">{{ item.albumTitle }}</div>
                <div class="desc">{{ item.intro }}</div>
                <div class="redio">
                    <img src="@/assets/images/redio.png" alt="">
                    <span>{{item.albumTrackCount}}</span>

                    <img src="@/assets/images/listen.png" alt="">
                    <span>{{numberFormat(item.albumPlayCount)}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { AlbumsModel } from '@/api/category'
import { useRouter } from 'vue-router';
const router = useRouter()
// 去详情页
const todetail = (id:number) => {
    router.push({
        name:'Album',
        params:{
            id
        }
    })
}



const initparam = ()=>({
    value:'',
    unit:''
})
// 将数字转化为亿
const numberFormat = (value:number) => {
  let param = initparam()
  let k = 10000
  let sizes = ['', '万', '亿', '万亿']
  let i
  if (value < k) {
      param.value = value as any
      param.unit = ''
  } else {
      i = Math.floor(Math.log(value) / Math.log(k));
      param.value = ((value / Math.pow(k, i))).toFixed(2);
      param.unit = sizes[i];
  }
//   console.log(param)
  return param.value+param.unit;
}






defineProps<{
    list: AlbumsModel[]
}>()

const imgUrl1 = 'https://imagev2.xmcdn.com/'
const imgUrl2 = '!op_type=3&columns=144&rows=144&magick=webp'
// https://imagev2.xmcdn.com/storages/b3d2-audiofreeh…hZ.png!op_type=3&columns=144&rows=144&magick=webp
// storages/b3d2-audiofreehighqps/91/8E/GMCoOSAFquG2AAU4zwEKNohZ.png
</script>

<style scoped lang="scss">
.category-container {
    padding-top: 16px;
    padding-left: 20px;

    .categorycard {
        display: flex;
        margin-bottom: 20px;

        .cate-img {
            width: 80px;
            height: 80px;
            border-radius: 10px;
            margin-right: 10px;
        }

        .content {
            color: #999;
            font-size: 14px;

            .title {
                font-size: 16px;
                color: #333;
                margin-bottom: 5px;
            }

            .desc {
                margin-bottom: 10px;
            }

            .redio {
                display: flex;

                img {
                    width: 16px;
                    height: 16px;
                    margin-right: 5px;

                }

                span {
                    margin-right: 20px;
                }
            }
        }
    }
}</style>